<template>
	<div id="home">
		<!--顶部滑动导航条-->
		<div id="wrapper">
			<ul>
				<li @click="getImgs(0)">全部</li>
				<li v-for="(item,index) in navlists" :key='index' @click="getImgs(item.id)">{{item.title}}</li>
			</ul>
		</div>
		<div id="main">
			<ul>
				<li v-for="(item,index) in imglists" :key='index'>
					<router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
						<img v-lazy="'http://182.254.146.100:8080/'+item.img_url" />
						<div class="des">
							<p>{{item.seo_title}}</p>
							<p>{{item.seo_description}}</p>
						</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import IScroll from '../../kits/iscroll.js';
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				navlists: [],
				imglists: []
			}
		},
		created() {
			this.getImgCategory();
			this.getImgs(0);
		},
		mounted() {

		},
		methods: {
			getImgCategory() {
				this.$http.get(this.$common.domain + '/api/getimgcategory').then(function(res) {
					var body = res.body;
					if(body.status != 0) {
						Toast(res.body.message);
						return;
					}
					this.navlists = body.message;
					document.querySelector('#wrapper>ul').style.width = 120 * this.navlists.length + 'px';
					var myScroll = new IScroll('#wrapper', {
						scrollX: true,
						scrollY: false
					});
				})
			},
			getImgs(id) {
				this.$http.get(this.$common.domain + '/api/getimages/' + id).then(function(res) {
					var body = res.body;
					if(body.status != 0) {
						Toast(res.body.message);
						return;
					}
					this.imglists = body.message;

				})
			}
		}
	}
</script>

<style scoped>
	#wrapper {
		height: 50px;
		overflow: hidden;
		line-height: 50px;
		position: relative;
	}
	
	#wrapper>ul {
		height: 100%;
		background-color: #333;
	}
	
	#wrapper li {
		display: inline-block;
		height: 100%;
		padding: 0 20px;
		color: #ccc;
	}
	
	#wrapper li>a {
		display: block;
		height: 100%;
	}
	#main{
		margin-top: 20px;
	}
	#main li>a {
		position: relative;
		display: block;
		padding: 0 10px;
	}
	
	#main img {
		width: 100%;
	}
	
	#main .des {
		position: absolute;
		bottom: 0;
		padding: 10px;
	}
	
	#main .des>p {
		color: white;
	}
</style>